$(function () {
    //添加图片
    $('#ds-upload').on('click', function (event) {
        $('#f-upload').trigger('click');
    });

    //改变图片z-index
    $('#ds-extra').on('click', function (event) {
        if (!this.dataset.toggleZ || this.dataset.toggleZ === 'no') {
            $('.ds-imgup-wrap').removeClass('bigZ');
            $('.toggleZ').text('将上传图显示在上层');
            this.dataset.toggleZ = 'yes';
        } else {
            $('.ds-imgup-wrap').addClass('bigZ');
            $('.toggleZ').text('将上传图片显示在下层');
            this.dataset.toggleZ = 'no';
        }
    });

    //添加图片：选择素材
    $('.ds-meta').on('click', 'img', function (event) {
        event.preventDefault();

        $('.ds-imgup')[0].src = this.src;
        $('#ds-extra').removeAttr('disabled');
        $('.ds-imgup-wrap').addClass('bigZ');
        $('.ds-imgup').resizable({
            containment: ".ds-imgup-wrap"
        });
        $('.ds-imgup').draggable({
            containment: ".ds-imgup-wrap"
        });
        $('.ui-wrapper').css('overflow', 'visible');
    });

    //换一批
    $('.ds-switch').on('click', function (event) {
        event.preventDefault();

        $.ajax({
            url: '/path/to/file',
            type: 'GET',
            dataType: 'json'
        })
            .done(function (data) {
                data.forEach(function (el, index) {
                    $('.ds-meta img').get(index).src = el.src;
                });
            })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });

    });

    (function () {
        var imgURL = '';

        //添加图片：上传图片
        $('#f-upload').on('change', function (event) {
            var file = this.files[0];
            if (!!file) {
                var fileReader = new FileReader();
                fileReader.onload = function () {
                    imgURL = this.result;
                    $('.ds-imgup')[0].src = this.result;
                    $('#ds-extra').removeAttr('disabled');
                    $('.ds-imgup-wrap').addClass('bigZ');
                    $('.ds-imgup').resizable({containment: ".ds-imgup-wrap"});
                    $('.ds-imgup').draggable({containment: ".ds-imgup-wrap"});
                    $('.ui-wrapper').css('overflow', 'visible');
                };

                fileReader.readAsDataURL(file);
            }
        });

        $('#ds-save').on('click', function (event) {
            event.preventDefault();

            //绘制上传图片并保存
            var canvasBackground = document.getElementById('canvasBackground'),
                canvasBackgroundContext = canvasBackground.getContext('2d'),
                img = new Image();
            var curImg = $('.ds-imgup'),
                curHeight = curImg.height(),
                curWidth = curImg.width(),
                offsetX = curImg.position().left + 170,
                offsetY = curImg.position().top + 120;
            var saved = '',
                b64 = '';
            img.src = imgURL;

            //将图片在canvas中绘制
            canvasBackgroundContext.drawImage(img, offsetX, offsetY, curWidth, curHeight);

            $('#zhezhao').show();
            $('.add-desc').show();
        });

        $('.ds-finish').on('click', function (event) {
            event.preventDefault();
            var t = document.getElementById('ds-sort');
            var desc = $('.ds-desc').val(),
                head = document.getElementById('ds-head').value,
                sort = t.options[t.selectedIndex].value,
                canvasBackground = document.getElementById('canvasBackground'),
                saved = canvasBackground.toDataURL("image/png"),
                b64 = saved.substring(22);

            //canvas导出图片并上传到服务器和保存到用户本地(以打开新链接的方式)
            var back_data = $.ajax({
                //服务器处理程序
                url: 'img/addDesign',
                type: 'POST',
                data: {'data': b64, 'sort': sort, 'content': desc, 'title': head}
            })
                .done(function () {
                    window.location = '/design/listBySort?sort='+sort;
                })
                .fail(function () {
                    console.log("error");
                })
                .always(function () {
                    console.log("complete");
                });
        });

        $('#ds-new').on('click', function (event) {
            newCanvas();
            app.drawBackground();
            $('#f-upload')[0].files[0] = null;
            $('.ds-imgup').attr('src', '');
            $('#f-upload')[0].value = '';
        });
    })();
});